
import '../App.css';
import http, { ResponseData } from '../utils/request';
import { useSearchParams } from 'react-router-dom';
import BigBall, { Status } from '../components/BigBall';
import { getIdenti } from '../utils/dicts';
import { useEffect, useState } from 'react';


export interface ResponseStatus {
    loading: boolean,
    data: ResponseData
}


function ControlPage() {

    const [searchParams, setSearchParams] = useSearchParams();
    let pathParames = Number(searchParams.get("uid"));
    const [code, setCode] = useState(0);
    const [loading, setContent] = useState(true);
    const [responseData, setResponseData] = useState<ResponseData>();


    useEffect(() => {

        // send first query request of device
        const fetchInitStatus = async () => {
            try {
                const url = "/api/v1/client/status/" + pathParames;
                const resp = await http.get(url);
                setResponseData(resp)
                setCode(resp.code);
                setContent(false);


            } catch (error) {
                console.log(error)
            }
        };

        fetchInitStatus()

    }, [])


    const buttonClickEvent = async (current: Status) => {
        switch (current) {
            case Status.Occupied:
                {
                    console.log("refresh");
                    const url = "/api/v1/client/status/" + pathParames;
                    const response = await http.get(url);
                    console.log(response.code);
                    setCode(response.code);
                    setResponseData(response)
                };
                break;
            case Status.Running:
                {
                    console.log("stop");
                    const url = "/api/v1/client/stop/" + pathParames;
                    const response = await http.post(url);
                    setCode(response.code);
                    setResponseData(response)
                };
                break;
            case Status.Vacant:
                {
                    console.log("Launch");
                    const url = "/api/v1/client/launch/" + pathParames;
                    const response = await http.post(url);
                    setCode(response.code);
                    setResponseData(response)
                };
                break;
        }
    }

    return (
        <div className="App">
            <header className="App-header">

                {loading ? (
                    <div className="loading-content">
                        <span>Device status is loading ...</span>
                    </div>
                ) : (
                    <div className="ready-content">
                        <div className='top-device-uid-container'>
                            <h3>Device UID</h3>
                            <h3>{pathParames}</h3>
                        </div>
                        <BigBall ball={getIdenti(code).status} />
                        <div className="device-status-panel">
                            <span>{getIdenti(code).lable}</span>
                            {code === 0 ? <span>{responseData?.data}</span> : <></>}
                        </div>

                        <div className="button-group">
                            <button onClick={() => buttonClickEvent(getIdenti(code).status)}>{getIdenti(code).button}</button>
                        </div>

                        <div className="copy-right-block">
                            <span>@Abdusami</span>
                            <span>Powerd by Rust Actix web</span>
                        </div>
                    </div>
                )}

            </header>
        </div>
    );

}

export default ControlPage;